import React from 'react';

export default class practise extends React.Component {

    state = {
        inputValue: '',
        list: []
    };
    idCount = 1;
    onInput(e) {
        this.setState({
            inputValue: e.target.value,
        })
    }
    onAdd() {
        this.setState({
            list: this.state.list.concat({
                id: this.idCount++,
                value: this.state.inputValue,
            })
        })
    }
    onRemove(id) {
        this.setState({
            list: this.state.list.filter(item => item.id !== id),
        });
    }
    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.value}
                    onInput={this.onInput.bind(this)}
                />
                <button onClick={this.onAdd.bind(this)}>增加</button>
                <ol>
                    {
                        this.state.list.map(item => (
                            <li key={ item.id }>
                                { item.value }
                                <button onClick={() => this.onRemove.call(this, item.id)}>删除</button>
                            </li>
                        ))
                    }
                </ol>
            </div>
        );
    }

}
